<template>
	<div class="flex align-center justify-end custom_page">
		<span class="total">共{{ pageTotal }}页</span>
		<span class="total">共{{ total }}条</span>
		<button v-if="pageTotal > 1" type="button" class="page_btn" @click="goFirst">首页</button>
		<el-pagination class="text-right" prev-text="上一页" next-text="下一页" :page-size="pageSize" :page-sizes="pageList"
			:total="total" background :layout="layout" :current-page.sync="page" @current-change="handleCurrentChange"
			@size-change="handleSizeChange" />
		<button v-if="pageTotal > 1" type="button" class="page_btn" @click="goEnd">尾页</button>
	</div>
</template>

<script>
	export default {
		name: 'currentPage',
		props: {
			total: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				page: 1,
				pageSize: 10,
				pageList: [5, 10, 20, 50, 100]
			}
		},
		computed: {
			pageTotal() {
				const num = Math.ceil(this.total / this.pageSize)
				return num > 0 ? num : 1
			},
			layout() {
				if (this.total === 0) {
					return 'prev, pager, next'
				}
				if (this.pageTotal > 1) {
					return 'sizes, prev, pager, next, jumper'
				}
				return 'sizes, prev, pager, next'
			}
		},
		methods: {
			changePageSize(val) {
				this.pageSize = val
				if (this.pageList.indexOf(val) === -1) {
					this.pageList.unshift(val)
				}
			},
			goEnd() {
				this.page = this.pageTotal
				this.$emit('getList')
			},
			goFirst() {
				this.page = 1
				this.$emit('getList')
			},
			handleSizeChange(val) {
				this.page = 1
				this.pageSize = val
				this.$emit('getList')
			},
			handleCurrentChange(val) {
				this.page = val
				this.$emit('getList')
			}
		}
	}
</script>

<style lang="less" scoped>
	.custom_page {
		margin-top: 15px;

		.total {
			margin-right: 10px;
		}

		.page_btn {
			color: #333333;
			background: #ffffff;
			border: 1px solid #eeeeee;
			font-size: 14px;
			padding-left: 12px;
			padding-right: 12px;
			min-width: 30px;
			border-radius: 2px;
			height: 28px;
			vertical-align: top;
			cursor: pointer;
		}

		.el-pagination__jump {
			margin-left: 10px;
			margin-right: 10px;
		}
	}
</style>
